<template>
  <s-layout title="知情同意书" :bgStyle="{ color: '#FFF' }">
    <view class="book">
      <view class="desc">
        <view v-html="state.content"></view>
      </view>
      <view class="sub">
        <view>
          <view>
            <checkbox-group @change="changeCheck">
              <label>
                <checkbox
                  style="transform: scale(0.7)"
                  value="cb"
                  color="#EBAC60"
                  :checked="state.check"
                />我已阅读和知晓
              </label>
            </checkbox-group>
          </view>
        </view>
        <view class="sign" @tap="goSign"> 签 名 </view>
      </view>
    </view>
  </s-layout>
</template>
<script setup>
  import sheep from '@/sheep';
  import { ref, reactive, onBeforeMount } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { consignee, mobile, address, region } from '@/sheep/validate/form';
  const state = reactive({
    content: '',
    check: false,
    value: [],
    uniq_id: '',
  });

  const changeCheck = (e) => {
    state.value = e.detail.value;
  };

  const goSign = () => {
    if (!state.value.length) {
      return uni.showToast({
        title: '请先阅读并同意知情书',
        icon: 'none',
        mask: true,
      });
    }
    sheep.$router.go('/pages/second/signature', {
      uniq_id: state.uniq_id,
    });
  };

  const getList = (id) => {
    sheep.$api.second
      .seeAgreeBook_api({
        id,
      })
      .then((res) => {
        state.content = res.data.content;
      });
  };
  onLoad((options) => {
    state.uniq_id = options.uniq_id;
    getList(options.id);
  });
</script>

<style lang="scss" scoped>
  .book {
    margin-top: 50rpx;
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0 32rpx;

    .desc {
      flex: 1;
      border: 2rpx solid #efefef;
      font-size: 32rpx;
      color: #464545;
      overflow: auto;
    }

    .sub {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 200rpx;
      // background: red;
    }

    .sign {
      width: 218rpx;
      height: 68rpx;
      background: linear-gradient(90deg, #ebac60 5%, #f3ca96 100%);
      box-shadow: 0rpx 6rpx 9rpx 0rpx rgba(246, 197, 138, 0.56);
      border-radius: 50rpx 50rpx 50rpx 50rpx;
      line-height: 68rpx;
      text-align: center;
      font-weight: 400;
      font-size: 36rpx;
      color: #ffffff;
      margin-right: 48rpx;
    }
  }

  :deep() {
    .page-body {
      display: flex;
      flex-direction: column;
    }
  }
</style>
